<template>
  <a-modal
    v-model="visible"
    :title="title ? '新增经纪人' : '编辑经纪人'"
    @ok="handleOk"
    :confirm-loading="confirmLoading"
    @cancel="$emit('update:visible', false)"
  >
    <a-form :form="form" :selfUpdate="true" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
      <a-form-item label="姓名">
        <a-input placeholder="请输入姓名" v-decorator="['name', { rules: [{ required: true, message: '姓名不能为空' }] }]" />
      </a-form-item>
      <a-form-item label="手机号">
        <a-input
          placeholder="请输入手机号"
          v-decorator="['phone', { rules: [{ required: true, message: '' }, { validator: validatorPhone }] }]"
        />
      </a-form-item>
      <a-form-item label="身份证号">
        <a-input placeholder="请输入身份证号" v-decorator="['code']" />
      </a-form-item>
      <a-form-item label="经纪人所属" v-if="!title">
        <a-select
          v-decorator="['resourceUserId', { rules: [{ required: true, message: '经纪人所属不能为空' }] }]"
          placeholder="选择经纪人所属"
          show-search
          :filter-option="filterOption"
          @popupScroll="popupScroll"
        >
          <a-select-option :value="item.id" v-for="item in userArr" :key="item.id">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import moment from "moment";
import { postSaveWithPC, putBrokers, getUsers } from "../api";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    dataJson: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    visible(v) {
      if (!v) {
        this.form.resetFields();
        this.title = true;
      }
    },
    dataJson(v) {
      if (v?.id) {
        this.title = false;
        setTimeout(() => {
          this.form.setFieldsValue({
            name: v.name,
            code: v.code,
            phone: v.phone,
            resourceUserId: v.resourceUserId
          });
        }, 100);
      }
    }
  },
  created() {
    this.onGetUsers();
  },
  data() {
    const validatorPhone = (rule, value, callback) => {
      if (!value) {
        callback(new Error("手机号不能为空"));
      } else {
        if (!/^1[3456789]\d{9}$/.test(value)) {
          callback(new Error("手机号格式不正确"));
        } else {
          callback();
        }
      }
    };
    const validatorIdCard = (rule, value, callback) => {
      if (!value) {
        callback();
      } else {
        // if (!/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(value)) {
        if (
          !/^((^[HMhm](\\d{8}|\\d{10})$)|(^(\\d{8}|^[a-zA-Z]{1}(\\d{7}))$)|(^[1-9]\\d{7}((0\\d)|(1[0-2]))(([0|1|2]\\d)|3[0-1])\\d{3}$)|(^[1-9]\\d{5}[1-9]\\d{3}((0\\d)|(1[0-2]))(([0|1|2]\\d)|3[0-1])((\\d{4})|\\d{3}[Xx]$)))$/.test(
            value
          )
        ) {
          callback(new Error("请输入正确的身份证号"));
        } else {
          callback();
        }
      }
    };
    return {
      validatorPhone,
      validatorIdCard,
      confirmLoading: false,
      form: this.$form.createForm(this, {}),
      title: true,
      userArr: []
    };
  },
  methods: {
    moment,
    popupScroll(e) {
      // const { target } = e;
      // const scrollHeight = target.scrollHeight - target.scrollTop;
      // const clientHeight = target.clientHeight;
      // if (scrollHeight === 0 && clientHeight === 0) {
      // } else {
      // }
    },
    async onGetUsers(v) {
      try {
        const { data } = await getUsers(v);
        this.userArr = data;
      } catch (err) {
        console.log("error log --> ", err);
      }
    },
    async onPostSaveWithPC(v) {
      try {
        await postSaveWithPC(v);
        this.confirmLoading = false;
        this.$emit("update:visible", false);
        this.$emit("upDate");
      } catch (err) {
        console.log("error log --> ", err);
        this.confirmLoading = false;
      }
    },
    async onPutBrokers(v) {
      try {
        await putBrokers({ id: this.dataJson.id, ...v });
        this.confirmLoading = false;
        this.$emit("update:visible", false);
        this.$emit("upDate");
      } catch (err) {
        console.log("error log --> ", err);
        this.confirmLoading = false;
      }
    },
    handleOk() {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.confirmLoading = true;
          if (values.code && this.regexp(values.code)) {
            this.$message.error("身份证格式错误");
            this.confirmLoading = false;
            return false;
          }
          if (JSON.stringify(this.dataJson) === "{}") {
            this.onPostSaveWithPC(values);
          } else {
            this.onPutBrokers(values);
          }
        }
      });
    },
    regexp(value) {
      if (/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(value)) return false;
      if (/^[hmHM]{1}[0-9]{8}$/.test(value)) return false;
      if (/^[hmHM]{1}[0-9]{10}$/.test(value)) return false;
      if (/^[a-zA-Z0-9]{1}[0-9]{7}$/.test(value)) return false;
      return true;
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
    }
  }
};
</script>

<style></style>
